<template>
	<view class="page">
		<view class="" style="flex: 1;">
			<!-- <up-navbar title="" @rightClick="{}" :autoBack="true" bgColor = "#fff" placeholder></up-navbar> -->
			<view class="flex column box-sizing width-full paddingTop-30 paddingBottom-30">
				<!-- 	<up-cell-group :customStyle = "{'background-color':'#fff'}">
					<up-cell @click="cellClick(0)" :value = "form.word_numName" title="每组刷词量" isLink></up-cell>
					<up-cell @click="cellClick(1)" :value = "form.group_numName" title="每日刷词组数" isLink ></up-cell>
					<up-cell @click="cellClick(2)" :value = "form.level_nowName" title="刷词类型" isLink></up-cell>
				</up-cell-group> -->
				<view class="width-full height-20"></view>
				<up-cell-group :customStyle="{'background-color':'#fff'}">
					<up-cell @click="cellClick(3)" :value="form.yingbiaoName" title="音标" isLink></up-cell>
					<up-cell @click="cellClick(5)" :value="form.cixingName" title="词性" isLink></up-cell>
					<up-cell @click="cellClick(4)" :value="form.yuyinName" title="播报次数" isLink></up-cell>
					<up-cell title="交互震动" isLink>

						<template #right-icon>
							<up-switch v-model="form.is_vibrate" activeValue='1' inactiveValue='0'></up-switch>
						</template>
					</up-cell>
					<up-cell @click="cellClick(8)" :value="form.typeName" title="英语发音类型" isLink></up-cell>
				</up-cell-group>
				<view class="width-full height-20"></view>
				<up-cell-group :customStyle="{'background-color':'#fff'}">
					<!-- <up-cell @click="cellClick(6)" :value = "form.moshiName" title="刷词模式" isLink></up-cell> -->
					<up-cell @click="cellClick(2)" :value="form.level_nowName" title="刷词类型" isLink></up-cell>
					<up-cell @click="cellClick(7)" :value="form.studymoshiName" title="学习模式" isLink></up-cell>
				</up-cell-group>
			</view>
			<up-picker closeOnClickOverlay keyName="label" :show="pickerShow" :columns="lists[defaultCell+'List']"
				@close="pickerShow = false" @cancel="pickerShow = false" @confirm="pickerChange"></up-picker>
		</view>
		<view class="width-full box-sizing btns flex column items-center flex-center">
			<view class="marginTop-30 flex flex-center">
				<view class="next_btn" @click="btnClick()">
					保存设置
				</view>

			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app';
	const updateWordSet = inject('updateWordSet');
	console.log(updateWordSet, 'assssssas');
	const form = ref({
		word_num: 5,
		word_numName: '',
		group_num: 5,
		group_numName: '',
		level_now: 1,
		level_nowName: '',
		yingbiao: 0,
		yingbiaoName: '',
		yuyin: 3,
		yuyinName: '',
		cixing: 0,
		cixingName: '',
		moshi: 1,
		moshiName: '',
		studymoshi: 1,
		studymoshiName: '',
		is_vibrate: '0',
		type: 1,
		typeName: ''
	})
	const checked = ref(false)
	const defaultCell = ref('')
	const pickerShow = ref(false)
	const lists = ref({
		word_numList: [
			[{
					label: '5个',
					value: 5
				},
				// {
				// 	label:'10个',
				// 	value:10
				// },
			]
		],
		group_numList: [
			[{
					label: '5组',
					value: 5
				},
				{
					label: '10组',
					value: 10
				},
			]
		],
		level_nowList: [
			[{
					label: '陌生词',
					value: 0
				},
				{
					label: '熟悉词',
					value: 1
				},
			]
		],
		yingbiaoList: [
			[{
					label: '隐藏',
					value: 0
				},
				{
					label: '显示',
					value: 1
				},
			]
		],
		yuyinList: [
			[{
					label: '0次',
					value: 0
				},
				{
					label: '1次',
					value: 1
				},
				{
					label: '2次',
					value: 2
				},
				{
					label: '3次',
					value: 3
				},
			]
		],
		cixingList: [
			[{
					label: '隐藏',
					value: 0
				},
				{
					label: '显示',
					value: 1
				},
			]
		],
		moshiList: [
			[{
					label: '快刷',
					value: 1
				},
				{
					label: '快记',
					value: 2
				},
			]
		],
		studymoshiList: [
			[{
					label: '中译英',
					value: 2
				},
				{
					label: '英译中',
					value: 1
				},
				// {
				// 	label:'混合',
				// 	value:3
				// },
			]
		],
		typeList: [
			[{
					label: '英音',
					value: 'ukphone'
				},
				{
					label: '美音',
					value: 'usphone'
				},
				// {
				// 	label:'混合',
				// 	value:3
				// },
			]
		]

	})
	const getUserInfoApi = inject('getUserInfo');

	onLoad(() => {
		getUserInfoApi().then(res => {
			console.log(res, '203')
			let data = res.memberset
			// form.value['word_num'] = fo['word_num']
			// form.value['word_numName'] = fo['word_numName']
			// form.value['group_num'] = fo['group_num']
			// form.value['group_numName'] = fo['group_numName']
			form.value['level_now'] = data['level']
			form.value['level_nowName'] = data['level'] == 1 ? '熟悉词' : '陌生词'
			form.value['yingbiao'] = data['yingbiao']
			form.value['yingbiaoName'] = data['yingbiao'] == 1 ? '显示' : '隐藏'
			form.value['yuyin'] = data['yuyin']
			form.value['yuyinName'] = data['yuyin'] == 0 ? '不播放' : data['yuyin']
			form.value['cixing'] = data['cixing']
			form.value['cixingName'] = data['cixing'] == 1 ? '显示' : '隐藏'
			form.value['is_vibrate'] = String(data['is_vibrate'])
			console.log(form.value['is_vibrate'], 218)
			form.value['moshi'] = data['moshi']
			form.value['moshiName'] = data['moshi'] == 1 ? '显示' : '隐藏'
			form.value['studymoshi'] = data['studymoshi']
			form.value['studymoshiName'] = data['studymoshi'] == 1 ? '英译中' : '中译英'
			form.value['type'] = data['pronun']
			form.value['typeName'] = data['pronun'] == 'usphone' ? '美音' : '英音'
		})
	});

	// let uInfo = uni.getStorageSync('userInfo');
	// let fo = uInfo.memberset
	// if(uInfo){
	// 	form.value['word_num'] = fo['word_num']
	// 	form.value['word_numName'] = fo['word_numName']
	// 	form.value['group_num'] = fo['group_num']
	// 	form.value['group_numName'] = fo['group_numName']
	// 	form.value['level_now'] = fo['level_now']
	// 	form.value['level_nowName'] = fo['level_nowName']
	// 	form.value['yingbiao'] = fo['yingbiao']
	// 	form.value['yingbiaoName'] = fo['yingbiaoName']
	// 	form.value['yuyin'] = fo['yuyin']
	// 	form.value['yuyinName'] = fo['yuyin'] == 1?'显示':'隐藏'
	// 	form.value['cixing'] = fo['cixing']
	// 	form.value['cixingName'] = fo['cixingName']
	// 	form.value['moshi'] = fo['moshi']
	// 	form.value['moshiName'] = fo['moshiName']
	// 	form.value['studymoshi'] = fo['studymoshi']
	// 	form.value['studymoshiName'] = fo['studymoshiName']
	// }

	const cellClick = (id) => {
		console.log(id)
		let datas = ['word_num', 'group_num', 'level_now', 'yingbiao', 'yuyin', 'cixing', 'moshi', 'studymoshi',
			'type']
		defaultCell.value = datas[id]
		console.log(defaultCell.value, 244)
		pickerShow.value = true

	}
	const onchange = (e) => {

		console.log(e, 228)
	}

	const pickerChange = (e) => {
		console.log(e.value[0].label, 22222222)
		if (e.value && e.value[0]) {
			form.value[defaultCell.value] = e.value[0].value
			form.value[defaultCell.value + "Name"] = e.value[0].label
		}
		pickerShow.value = false

	}

	// 保存设置按钮
	const btnClick = () => {
		console.log(3333333333)

		updateWordSet({

			level_now: form.value['level_now'],
			yingbiao: form.value['yingbiao'],
			yuyin: form.value['yuyin'],
			cixing: form.value['cixing'],
			pronun: form.value['type'],
			is_vibrate: form.value['is_vibrate'],
			studymoshi: form.value['studymoshi'],

		}).then(res => {
			console.log(res, 666666)
			setTimeout(() => {
				uni.navigateBack();
			}, 200)
		})

		// uni.navigateBack()
	}
</script>

<style lang="scss" scoped>
	.page {
		flex: 1;
		background-color: #f1f1f1;
	}

	.btns {
		padding-bottom: calc(50rpx);
	}
</style>